<template>
    <div class="register">
        <div class="register-content register-content-1">
          <div style="color: #0A1629; font-size: 18px;text-align: center">手机验证登录</div>
          <div class="login-inputbox">
            <div class="form-content" style="margin-bottom: 20px">
              <div class="input-wrapper vertical">
                <div class="wrap-name" style="padding: 0">姓名</div>
                <van-field @blur="getpoliceman" v-model="form.name" />
              </div>
              <div class="input-wrapper vertical">
                <div class="wrap-name" style="padding: 0">警员号</div>
                <van-field v-model="form.cardNum" @blur="getpoliceman" :type="passwordType" placeholder="输入警官号" center label="">
                  <template #button>
                    <i class="iconfont eye" :class="passwordType=='password'?'iconeye':'iconeye1'" @click="changePasswordType"></i>
                  </template>
                </van-field>
              </div>
              <div class="input-wrapper vertical">
                <div class="wrap-name" style="padding: 0">手机号</div>
                <van-field v-model="form.mobile" maxlength="11" center label="">
                  <template #button>
                    <van-button @click="getCode" class="textbtn" size="small">
                      {{msg}}
                    </van-button>
                  </template>
                </van-field>
              </div>
              <div class="input-wrapper vertical">
                <div class="wrap-name" style="padding: 0">验证码</div>
                <van-password-input
                    :value="form.validCode"
                    :gutter="15"
                    :length="4"
                    :mask="false"
                    :focused="showKeyboard"
                    @focus="showKeyboard = true"
                />
                <van-number-keyboard
                    v-model="form.validCode"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                />
              </div>
            </div>
          </div>
        </div>
        <van-button class="subbtn" block type="primary" @click="login">登录</van-button>
    </div>
</template>

<script>
import {Toast} from 'vant'
import GHeader from '@/components/Header'
import {passwordLogin, sendSmsValidCode, getpoliceman, validateSmsCode} from '@/api/myapi'
import {setDictMap} from '@/lib/dic'
import moment from 'moment'
    export default {
        components: {
            GHeader
        },
        data() {
            return {
              showDia: false,
              form: {
                openid: '',
                name: '',
                cardNum: '',
                // name: '张三',
                // cardNum: 'BTJJ-00001',
                code: "",
                mobile: "",
                userType: '1'
              },
              passwordType: 'password',
              checked: true,
              activeIcon: require('../assets/img/checked.png'),
              inactiveIcon: require('../assets/img/nocheck.png'),
              timer: null,
              showKeyboard: false,
              msg: '发送验证码',
            }
        },
        methods: {
          getpoliceman() {
            if(this.form.name && this.form.cardNum) {
              getpoliceman({
                name: this.form.name,
                cardNum: this.form.cardNum
              }, res => {
                if(res.code === 0) {
                  this.form = {
                    ...this.form,
                    ...res.data
                  }
                }
              })
            }
          },
          login() {
            this.passwordLogin()
          },
          getCode() {
            if(!this.form.mobile) {
              return Toast('请填写手机号')
            }
            if(this.timer) return
            if(!this.timer) {
              let count = 60
              this.msg = count + ' 秒后重新发送'
              this.timer = setInterval(() => {
                if(count > 0) {
                  --count
                  this.msg = count + ' 秒后重新发送'
                } else {
                  clearInterval(this.timer)
                  this.timer = null
                  this.msg = '发送验证码'
                }
              }, 1000)
            }
            sendSmsValidCode({mobile: this.form.mobile}, res => {
              if(res.code === 0) {
                Toast('发送成功')
              } else {
                Toast(res.msg)
              }
            })
          },
          async validateSmsCode() {
            const res = await validateSmsCode({
              mobile: this.form.mobile,
              scene: 0,
              code: this.form.validCode
            })
            return res
          },
          changePasswordType() {
              if(this.passwordType === 'password') {
                  this.passwordType = 'text'
              } else {
                  this.passwordType = 'password'
              }
          },
          async passwordLogin() {
            if(!this.form.name) return Toast('请填写姓名')
            if(!this.form.cardNum) return Toast('请填写警员号')
            if(!this.form.mobile) return Toast('请填写手机号')
            if(!this.form.validCode) return Toast('请填写验证码')
            const {code, msg} = await this.validateSmsCode()
            if(code != 0) return Toast(msg)
            var data = {
              ...this.form,
              openid: this.$route.query.openid,
            }
            passwordLogin(data, res => {
              if(res.code === 0) {
                setDictMap()
                this.$router.push('/nav/home?openid=' + this.$route.query.openid)
              } else {
                Toast(res.msg)
              }
            })
          }
        },
        mounted() {
          if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
            window.entryUrl = location.href
          }
        }
    }
</script>

<style lang="less" scoped>
@import '~@/assets/style/themeVariable.less';
.register {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #F4F9FD;
  padding: 56px 20px 20px 20px;
  overflow: auto;
  .vertical.input-wrapper .van-cell {
    border: 1px solid #ebedf0;
    padding: 2.6vw 2.667vw;
    margin-top: 2.667vw;
    border-radius: 15px;
  }
  .van-password-input__security li {
    border: 1px solid #ebedf0;
    border-radius: 15px;
  }
    .h-option {
        color: @primary;
        font-weight: bold;
    }
    .title {
      position: relative;
      padding: 10px 0 16px 0;
      text-align: left;
      color: #333333;
      font-weight: normal;
      .a-title {
        font-size: 16px;
        font-weight: normal;
        margin-top: 8px;
      }
      .subtitle {
        font-size: 16px;
        font-weight: normal;
      }
      .logo {
        position: absolute;
        top: 5px;
        right: 0;
        width: 40px;
        height: 45px;
      }
    }
    .subbtn {
      border-color: #3F8CFF;
      height: 46px;
      font-size: 15px;
      width: 100%;
      margin: 40px auto 0 auto;
      border-radius: 14px;
      background: #3F8CFF;
      box-shadow: 0px 6px 12px  #3F8CFF;
    }
    .check-wrapper {
        justify-content: center;
        padding-top: 20px;
    }
    .register-content {
      min-height: calc(100% - 200px);
      padding: 0 20px 20px 20px;
      background: #ffffff;
      box-sizing: border-box;
      .login-title {
        font-size: 16px;
        display: flex;
        padding: 0px 0px;
        height: 70px;
        align-items: center;
        div {
          flex: 1;
          text-align: center;
          color: #000000;
        }
      }
      .login-inputbox {
        margin-top: 20px;
      }
      .input-title {
        font-size: 17px;
        color: #000000;
        padding: 10px 0;
      }
    }
  .register-content-1 {
    padding-top: 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 20px;
    .login-title {
      .mmdl {
        color: #ffffff;
      }
    }
  }
}
/deep/.van-password-input {
  margin: 8px 0;
}

.verticalline .van-cell {
  border: 1px solid #D8E0F0;
  padding: 10px;
  border-radius: 15px;
  overflow: hidden;
}
</style>
